<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app-8">
        <label v-once>{{message}}</label><br />
        <label>{{message}}</label><br />
        <input type="text" v-model="message">

    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app-8',
            data: {
                message: 'Hello World!!'
            },
            beforeCreate: function () {
                // 1. data 初始化之前执行，不能操作 data
            },
            create: function () {
                // 2. data 初始化之后执行，模板加载之前，可以修改 / 获取 data 中的值
                console.log(this.message);
                // this.message = 'Hello World!! create(）';
            },
            beforeMount: function () {
              // 3. 模板加载之后，数据初始渲染（挂载）之前，可以修改 / 获取 data 中的值
              // this.message = 'Hello World!!  beforeMount';
            },
            mounted: function () {
                // 4. 数据初始渲染（挂载）之后，可以对 data 中的变量进行修改，但是不会影响 v-once 的渲染
                // this.message = "Hello World!!  mounted";
            },
            beforeUpdate: function () {
                // 5. 数据渲染之后，当 data 中的数据发生变化触发重新渲染，渲染之前执行此函数
                console.log("---" + this.message);
                this.message = 'Hello World!!  beforeUpdate';
            },
            update: function () {
                // 6. data 数据被修改之后，重新渲染到页面之后
                // this.message = "Hello World!!   update";
            },
            beforeDestroy: function () {
                // 7. 实例销毁之前
            },
            destroy: function () {
                // 8. 实例销毁之后
            }
        })

    </script>
</body>
</html>